<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
<div id="app">
   <!-- 监听器 -->
   <!-- Object.defindProperty  ---监听器，对data中数据劫持 -->
   <!-- watch 
    computed-->
   {{msg}}
   {{newMsg}}
</div>

<script src="../20211018/vue.js"></script>
<script>
    let myApp = new Vue({
        el: '#app',
        data: {
            msg:'这是测试内容',
            newMsg:'',
            formData:{
                name:'tom',
                age:'18'
            }
           },
        watch: {
            //初始化
            //当msg数据发生变化，在msg的后面添加一个随机数
        //    msg(newValue,oldValue){
        //        console.log(newValue)
        //        console.log(oldValue)
        //        this.msg =newValue+Math.random()
        //    }
        //watch监听 一个值 修改其他值
        // msg:{
        //     handler(newValue,oldValue){
        //        console.log(newValue)
        //        console.log(oldValue)
        //        this.msg =newValue+Math.random()
        //    },
        //    //初始化执行监听器
        //        immediate: true  
        //     }

        // formData:{
        //     handler(newValue,oldValue){
        //         console.log(this.formData.age)
        //         console.log(oldValue.age)
        //     },
        //     //深度监听
        //     deep:true
        // }

        'formData.name': {
            handler(newValue,oldValue){
               console.log(this.formData.name)
               console.log('name属性变化。触发监听器')
               }
        }    
        },
        methods:{

        }    
    })
</script>


</body>
</html>